<template>
  <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto', background:'#14866a',paddingTop:'64px' }">
    <Menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
      <Submenu :name="index" v-for="(item,index) in listData" :key="index">
        <template slot="title">
          <Icon :type="item.icon" size="20"/>{{item.title}}
        </template>
        <MenuItem name="1-1" v-for="(item2,index2) in item.children" :key="index2">
        <router-link :to="item.path+item2.path"> {{item2.title}}</router-link>
        </MenuItem>
      </Submenu>
    </Menu>
  </Sider>
</template>



<script>
export default {
  data() {
    return {
      listData: [
        {
          title: "购物商城",
          icon: "ios-apps",
          path: "/admin",
          children: [
            { title: "商品管理", path: "/goods-list" },
            { title: "栏目管理", path: "/member-list" }
          ]
        },
        {
          title: "会员管理",
          icon: "ios-headset-outline",
          path: "/admin",
          children: [{ title: "会员列表", path: "/pograma-list" }]
        },
        {
          title: "商城订单",
          icon: "ios-list-box",
          path: "/admin",
          children: [{ title: "订单管理", path: "/orderForm-list" }]
        }
      ]
    };
  }
};
</script>

<style>
.ivu-menu-item > a{
    color: rgb(233, 245, 255);
    
}
.ivu-menu-dark {
    background-color: #14866a!important;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opene{
    background-color: #05795c!important;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened{
    background-color: #209e7e!important;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title{
    background-color: #04b387!important;
}
body .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover{
    background-color: #16b384!important;
}

</style>
